* { padding: 0; margin: 0; text-decoration: none; list-style: none;}
html, body, #root, .container { width: 100%; height: 100%;}
/* 如果所有的平台都一样，建议使用 100px 布局 */
/* html { font-size: 100px; } */
/* vw布局
  iphone 6/7/8 设备像素比 750 * 1334 屏幕宽度 375 * 667
    100 / 375 * 100 
    100 / 375 100等分375份
    * 100 为了好计算
    如果写 26.6666667vw，代表就是 在 iphone 6/7/8下 1rem = 100px
  iphone 5 设备像素比 640 * 1136 屏幕宽度 320 * 568
    如果写 31.25vw 代表就是 在 iphone 5下 1rem = 100px
  以iphone6 为例  750个物理像素  375个css像素
  面试时其实想要听到的时 1个物理像素
*/
html { font-size: 26.66666667vw;}
@media (min-width: 960px) {
  html { font-size: 100px; }
}
body { font-size: 12px; }
.container {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.container .box {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.container .box .header{
  height: 0.44rem;
  background-color: #ff6666;
}
.container .box .header ul { display: flex;height: 100%;}
.container .box .header ul li{ 
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.container .box .header ul li:nth-child(1){ width: 50px;}
.container .box .header ul li:nth-child(2){ flex: 1}
.container .box .header ul li:nth-child(3){ width: 50px;}
.container .box .content{
  flex: 1;
  overflow: auto;
}
.container .footer {
  height: 0.5rem;
  background-color: #efefef;
}
.container .footer ul { width: 100%; height: 100%; display: flex;}
.container .footer ul a { 
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #333;
}
.container .footer ul a span {
  font-size: 0.24rem;
}
.container .footer ul a.active {
  color: #f66;
}
.tip {
  position: fixed;
  top: 0;
  left:0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* portrait 竖屏  landscape 横屏*/
@media (orientation: landscape) {
  .tip {
    display: flex;
  }
}